<template>
    <el-card>
     <el-tabs v-model="activeName">
        <el-tab-pane label="个人信息" name="userinfo">
            <el-form :model="userForm" ref="userForm" label-width="120px">
                <el-row>
                  <el-col :span="12">
                      <el-form-item label="姓名" required prop="realName">
                        <el-input v-model="userForm.realName" size="small" disabled></el-input>
                      </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                      <el-form-item label="昵称" required prop="name">
                        <el-input v-model="userForm.name" size="small" placeholder="请输入昵称"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                       <el-form-item label="手机号" prop="phone">
                            <el-input v-model="userForm.phone" size="small" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                      <el-form-item label="邮箱" prop="email">
                        <el-input v-model="userForm.email" size="small" placeholder="请输入邮箱"></el-input>
                     </el-form-item>
                  </el-col>
                </el-row>
              <el-form-item style="text-align: center">
                    <el-button type="primary" @click="onSubmit('userForm')" size="small">提交</el-button>
                    <el-button size="small" @click="resetUserForm">清空</el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="修改密码" name="editPwd">
            <el-form :model="editPwdForm" ref="editPwdForm" label-width="120px">
                <el-row>
                  <el-col :span="12">
                       <el-form-item label="原密码" prop="oldPassword">
                            <el-input v-model="editPwdForm.oldPassword" placeholder="请输入原密码" size="small"></el-input>
                        </el-form-item>
                  </el-col>
                </el-row>
                 <el-row>
                  <el-col :span="12">
                       <el-form-item label="新密码" prop="newPassword">
                            <el-input v-model="editPwdForm.newPassword" placeholder="请输入原密码" size="small"></el-input>
                        </el-form-item>
                  </el-col>
                </el-row>
                 <el-row>
                  <el-col :span="12">
                       <el-form-item label="确认密码" prop="newPassword1">
                            <el-input v-model="editPwdForm.newPassword1" placeholder="请输入原密码" size="small"></el-input>
                        </el-form-item>
                  </el-col>
                </el-row>
                  <el-form-item style="text-align: center">
                    <el-button type="primary" @click="updateSubmit('editPwdForm')" size="small">提交</el-button>
                    <el-button size="small">清空</el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>
     </el-tabs>
    </el-card>
</template>

<script>
import { getUserInfo,updatePassword,updateUserInfo } from '@/api/userinfo.api.js'
    export default {
        data() {
           return {
               userForm: {},
               editPwdForm: {},
               activeName: 'userinfo'
           }
        },
        mounted() {
            this.getUser();
        },
        methods: {
            async getUser() {
                const result = await getUserInfo();
                if(result.code === 200) {
                    this.userForm = result.data;
                }
            },
            resetUserForm() {
                this.userForm.name = '';
                this.userForm.phone = '';
                this.userForm.email = '';
            },
            onSubmit(formName) {
                this.$refs[formName].validate(async(valid) => {
                  if (valid) {
                      const result = await updateUserInfo(this.userForm);
                      if(result.code === 200) {
                        this.$message.success('修改成功');
                      }
                  } else {
                    console.log('error submit!!');
                    return false;
                  }
                });
            },
            updateSubmit(formName) {
                this.$refs[formName].validate(async(valid) => {
                  if (valid) {
                      const result = await updatePassword(this.editPwdForm);
                      if(result.code === 200) {
                        this.$message.success('修改成功');
                      }
                  } else {
                    console.log('error submit!!');
                    return false;
                  }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>